<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神话学院管理系统 - 交互原型</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-blue: #1890ff;
            --primary-blue-light: #40a9ff;
            --primary-blue-dark: #096dd9;
            --success-green: #52c41a;
            --warning-orange: #fa8c16;
            --error-red: #f5222d;
            --info-purple: #722ed1;
            --text-primary: #262626;
            --text-secondary: #8c8c8c;
            --text-disabled: #bfbfbf;
            --border-light: #d9d9d9;
            --background-light: #f5f5f5;
            --white: #ffffff;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--background-light);
            color: var(--text-primary);
        }
        
        .prototype-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
            color: white;
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .demo-section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--primary-blue);
            border-left: 4px solid var(--primary-blue);
            padding-left: 12px;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .demo-card {
            background: var(--white);
            border-radius: 8px;
            padding: 24px;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
        }
        
        .demo-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        .demo-card h3 {
            font-size: 1.2rem;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        .color-palette {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 16px;
        }
        
        .color-item {
            padding: 12px;
            border-radius: 6px;
            text-align: center;
            color: white;
            font-weight: 500;
        }
        
        .stat-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        
        .stat-card {
            background: var(--white);
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border-left: 4px solid var(--primary-blue);
        }
        
        .stat-card.primary { border-left-color: var(--primary-blue); }
        .stat-card.success { border-left-color: var(--success-green); }
        .stat-card.warning { border-left-color: var(--warning-orange); }
        .stat-card.info { border-left-color: var(--info-purple); }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        
        .table-demo {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }
        
        .mock-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .mock-table th {
            background: var(--background-light);
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid var(--border-light);
        }
        
        .mock-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .mock-table tr:hover {
            background: var(--background-light);
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status-active {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        
        .status-inactive {
            background: #fff2e8;
            color: #fa8c16;
            border: 1px solid #ffd591;
        }
        
        .form-demo {
            background: var(--white);
            padding: 24px;
            border-radius: 8px;
            box-shadow: var(--shadow-md);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .responsive-demo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .device-mockup {
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            box-shadow: var(--shadow-lg);
            position: relative;
        }
        
        .device-mockup::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 6px;
            background: var(--border-light);
            border-radius: 3px;
        }
        
        .mobile-content {
            background: var(--background-light);
            border-radius: 8px;
            padding: 16px;
            min-height: 400px;
        }
        
        .mobile-nav {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding: 12px;
            background: var(--white);
            border-radius: 8px;
        }
        
        .nav-item {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .nav-item.active {
            color: var(--primary-blue);
        }
        
        .interactive-demo {
            background: var(--white);
            border-radius: 8px;
            padding: 24px;
            box-shadow: var(--shadow-md);
        }
        
        .demo-controls {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .demo-result {
            background: var(--background-light);
            border-radius: 6px;
            padding: 16px;
            min-height: 100px;
            margin-top: 16px;
        }
        
        @media (max-width: 768px) {
            .prototype-container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="prototype-container">
            <!-- 头部标题 -->
            <div class="header">
                <h1>神话学院管理系统</h1>
                <p>现代化教育管理平台 - UI/UX 设计原型展示</p>
            </div>
            
            <!-- 设计系统展示 -->
            <div class="demo-section">
                <h2 class="section-title">设计系统</h2>
                
                <div class="card-grid">
                    <div class="demo-card">
                        <h3>色彩系统</h3>
                        <p>基于教育行业特点的色彩方案</p>
                        <div class="color-palette">
                            <div class="color-item" style="background: var(--primary-blue)">主色蓝</div>
                            <div class="color-item" style="background: var(--success-green)">成功绿</div>
                            <div class="color-item" style="background: var(--warning-orange)">警告橙</div>
                            <div class="color-item" style="background: var(--error-red)">错误红</div>
                            <div class="color-item" style="background: var(--info-purple)">信息紫</div>
                        </div>
                    </div>
                    
                    <div class="demo-card">
                        <h3>数据统计</h3>
                        <p>关键指标的可视化展示</p>
                        <div class="stat-cards">
                            <div class="stat-card primary">
                                <div class="stat-value">5,240</div>
                                <div class="stat-label">学生总数</div>
                            </div>
                            <div class="stat-card success">
                                <div class="stat-value">186</div>
                                <div class="stat-label">教师数量</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据表格展示 -->
            <div class="demo-section">
                <h2 class="section-title">数据管理</h2>
                
                <div class="table-demo">
                    <table class="mock-table">
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年级</th>
                                <th>班级</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>20230001</td>
                                <td>张三</td>
                                <td>一年级</td>
                                <td>一班</td>
                                <td><span class="status-badge status-active">在校</span></td>
                                <td>
                                    <el-button size="small">编辑</el-button>
                                    <el-button size="small" type="danger">删除</el-button>
                                </td>
                            </tr>
                            <tr>
                                <td>20230002</td>
                                <td>李四</td>
                                <td>二年级</td>
                                <td>三班</td>
                                <td><span class="status-badge status-inactive">离校</span></td>
                                <td>
                                    <el-button size="small">编辑</el-button>
                                    <el-button size="small" type="danger">删除</el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 表单交互展示 -->
            <div class="demo-section">
                <h2 class="section-title">表单交互</h2>
                
                <div class="form-demo">
                    <div class="form-row">
                        <el-input v-model="formData.name" placeholder="请输入学生姓名"></el-input>
                        <el-select v-model="formData.grade" placeholder="选择年级" style="width: 100%">
                            <el-option label="一年级" value="1"></el-option>
                            <el-option label="二年级" value="2"></el-option>
                            <el-option label="三年级" value="3"></el-option>
                        </el-select>
                    </div>
                    
                    <div class="form-row">
                        <el-input v-model="formData.studentNo" placeholder="学号"></el-input>
                        <el-select v-model="formData.gender" placeholder="性别" style="width: 100%">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </div>
                    
                    <el-button type="primary" style="width: 100%; margin-top: 16px;">
                        保存学生信息
                    </el-button>
                </div>
            </div>
            
            <!-- 响应式设计展示 -->
            <div class="demo-section">
                <h2 class="section-title">响应式设计</h2>
                
                <div class="responsive-demo">
                    <div class="device-mockup">
                        <h3 style="text-align: center; margin-bottom: 16px;">移动端界面</h3>
                        <div class="mobile-content">
                            <div style="text-align: center; padding: 20px;">
                                <div style="font-size: 1.5rem; font-weight: 600; margin-bottom: 8px;">首页概览</div>
                                <div style="color: var(--text-secondary); margin-bottom: 20px;">欢迎回来，管理员</div>
                                
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;">
                                    <div style="background: var(--primary-blue); color: white; padding: 12px; border-radius: 6px; text-align: center;">
                                        <div style="font-size: 1.2rem; font-weight: 600;">5,240</div>
                                        <div style="font-size: 0.8rem;">学生</div>
                                    </div>
                                    <div style="background: var(--success-green); color: white; padding: 12px; border-radius: 6px; text-align: center;">
                                        <div style="font-size: 1.2rem; font-weight: 600;">186</div>
                                        <div style="font-size: 0.8rem;">教师</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mobile-nav">
                            <div class="nav-item active">
                                <el-icon><i-data-board></i-data-board></el-icon>
                                <div>首页</div>
                            </div>
                            <div class="nav-item">
                                <el-icon><i-user></i-user></el-icon>
                                <div>学生</div>
                            </div>
                            <div class="nav-item">
                                <el-icon><i-school></i-school></el-icon>
                                <div>教务</div>
                            </div>
                            <div class="nav-item">
                                <el-icon><i-setting></i-setting></el-icon>
                                <div>设置</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="device-mockup">
                        <h3 style="text-align: center; margin-bottom: 16px;">平板端界面</h3>
                        <div class="mobile-content" style="min-height: 300px;">
                            <div style="padding: 16px;">
                                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                                    <div style="width: 40px; height: 40px; background: var(--primary-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white;">
                                        <el-icon><i-user></i-user></el-icon>
                                    </div>
                                    <div>
                                        <div style="font-weight: 600;">学生管理</div>
                                        <div style="font-size: 0.9rem; color: var(--text-secondary);">管理学生基本信息</div>
                                    </div>
                                </div>
                                
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                                    <el-button type="primary" style="width: 100%">
                                        <el-icon><i-plus></i-plus></el-icon>
                                        新增学生
                                    </el-button>
                                    <el-button style="width: 100%">
                                        <el-icon><i-upload></i-upload></el-icon>
                                        批量导入
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 交互演示 -->
            <div class="demo-section">
                <h2 class="section-title">交互演示</h2>
                
                <div class="interactive-demo">
                    <div class="demo-controls">
                        <el-button @click="showMessage('success')" type="success">成功提示</el-button>
                        <el-button @click="showMessage('warning')" type="warning">警告提示</el-button>
                        <el-button @click="showMessage('error')" type="danger">错误提示</el-button>
                        <el-button @click="showLoading" type="info">加载状态</el-button>
                    </div>
                    
                    <el-switch v-model="demoSwitch" active-text="启用状态" inactive-text="禁用状态"></el-switch>
                    
                    <div class="demo-result">
                        <div v-if="currentMessage" :class="['message', messageType]">
                            {{ currentMessage }}
                        </div>
                        <div v-else-if="isLoading" class="loading">
                            加载中...
                        </div>
                        <div v-else>
                            点击上方按钮查看交互效果
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue
        const { ElMessage, ElMessageBox, ElLoading } = ElementPlus
        
        const app = createApp({
            setup() {
                const formData = ref({
                    name: '',
                    grade: '',
                    studentNo: '',
                    gender: ''
                })
                
                const demoSwitch = ref(true)
                const currentMessage = ref('')
                const messageType = ref('')
                const isLoading = ref(false)
                
                const showMessage = (type) => {
                    const messages = {
                        success: '操作成功完成！',
                        warning: '请注意相关事项！',
                        error: '操作失败，请重试！'
                    }
                    
                    currentMessage.value = messages[type]
                    messageType.value = type
                    isLoading.value = false
                    
                    // 3秒后清除消息
                    setTimeout(() => {
                        currentMessage.value = ''
                    }, 3000)
                }
                
                const showLoading = () => {
                    isLoading.value = true
                    currentMessage.value = ''
                    
                    // 模拟加载过程
                    setTimeout(() => {
                        isLoading.value = false
                        showMessage('success')
                    }, 2000)
                }
                
                return {
                    formData,
                    demoSwitch,
                    currentMessage,
                    messageType,
                    isLoading,
                    showMessage,
                    showLoading
                }
            }
        })
        
        // 注册Element Plus组件
        app.use(ElementPlus)
        
        // 注册图标
        const icons = ElementPlusIconsVue
        for (const [key, component] of Object.entries(icons)) {
            app.component(key, component)
        }
        
        app.mount('#app')
    </script>
</body>
</html>